<template>
  <div style="width: 1200px;margin: 0 auto">
    <h1>{{titleMessage}}</h1>
    <div>
      <h2>订单名称：{{ordersData.oname}}</h2>
      <h2>订单总价：{{ordersData.oprice}}</h2>
    </div>
    <div>
      <h2>请选择支付方式:
        <el-radio v-model="radio1" label="1" border @change="((val)=>{changeStatus1(val)})">支付宝</el-radio>
        <el-radio v-model="radio1" label="2" border @change="((val)=>{changeStatus2(val)})">微信</el-radio>
      </h2>
    </div>
    <el-button style="width: 300px;height: 50px;background-color: #409EFF;font-size: 25px;color: black" @click="toPay()">点击付款</el-button>
    <!--<el-table
      ref="multipleTable"
      :data="packageDetils"
      tooltip-effect="dark"
      style="width: 100%"
      v-if="canshow">
      &lt;!&ndash;<el-table-column
        type="selection"
        width="50">
      </el-table-column>&ndash;&gt;
      <el-table-column
        label="套餐图片"
        width="150">
        <template slot-scope="scope">
          <el-avatar shape="square" :size="100" :src="scope.row.gpimg"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="gpname"
        label="套餐名称"
        width="350">
      </el-table-column>
      <el-table-column
        prop="gpprice"
        label="套餐价格"
        width="150">
      </el-table-column>
      <el-table-column
        prop="number"
        label="套餐数量"
        width="200">
      </el-table-column>
      <el-table-column
        label="价格小计"
        width="150">
        <template slot-scope="scope">
          {{scope.row.number*scope.row.gpprice}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" @deleteOne(scope.row.number) circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      ref="multipleTable"
      :data="ordersDetailData"
      tooltip-effect="dark"
      style="width: 100%"
      v-if="show">
      <el-table-column
        label="图片"
        width="150">
        <template slot-scope="scope">
          <el-avatar shape="square" :size="100" :src="scope.row.gdimage"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="gdname"
        label="菜名"
        width="350">
      </el-table-column>
      <el-table-column
        prop="gdprice"
        label="价格"
        width="150">
      </el-table-column>
      <el-table-column
        label="数量"
        width="200"
        prop="onumber"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="价格小计"
        width="150">
        <template slot-scope="scope">
          {{scope.row.onumber * scope.row.gdprice}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" @deleteOne(scope.row.number) circle></el-button>
        </template>
      </el-table-column>
    </el-table>-->

  </div>

</template>

<script>
  import axios from 'axios';
    export default {
        name: "OrderPay",
        data() {
          return {
            canshow: '',
            ptid: 1,
            radio1: false,
            titleMessage: '这是订单结算页面',
            ordersData: {
              oname:'未知订单',
              oprice:0
            },
            multipleSelection: [],
          }
        },
        methods: {
          deleteOne(gid) {
            alert(gid)
          },
          handleChange(value) {
            console.log(value);
          },
          toPay() {
            var _this = this;
            window.location.href = `/api/pay/alipay/${_this.ordersData.oname}/${_this.ptid}/${_this.ordersData.oprice}`;
          },
          changeStatus1:function (val) {
            this.ptid = 1;
          },
          changeStatus2:function (val) {
            this.ptid = 2;
          },
        },
        mounted() {
          this.show = false;
          this.ordersData.oprice = this.$route.params.allprice;
          this.ordersData.oname = this.$route.params.oname;
        }
    }
</script>

<style scoped>

</style>
